<template>
	<view class="container">
		<view class="orderlist">
			<view class="orderitem">
				<view class="order-top">
					 <text>工种：{{'水电'}}</text>
					 <view class="orderstatus">
					 	<text>售后中</text>
						<u-icon name="/static/navigate.png" size="30"></u-icon>
					 </view>
				</view>
				<view class="orderservice">
					<view class="serviceitem">
						<text class="servicetitle">施工时间：</text>
						<text class="servicevalue">9月5日 5:00 至 6:00</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">客户姓名：</text>
						<text class="servicevalue">李静</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">上门地址：</text>
						<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
					</view>
				</view>
				<view class="orderbtns">
					<view class="orderbtn">
						<text>售后中</text>
					</view>
				</view>
			</view>
			<view class="orderitem">
				<view class="order-top">
					 <text>工种：{{'水电'}}</text>
					 <view class="orderstatus">
					 	<text>申请退款</text>
						<u-icon name="/static/navigate.png" size="30"></u-icon>
					 </view>
				</view>
				<view class="orderservice">
					<view class="serviceitem">
						<text class="servicetitle">退款金额：</text>
						<text class="servicevalue error">{{price.toFixed(2)|addPaysign}}</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">退款原因：</text>
						<text class="servicevalue">未按约定前来售后</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">客户姓名：</text>
						<text class="servicevalue">李静</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">上门地址：</text>
						<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
					</view>
				</view>
				<view class="orderbtns">
					<view class="orderbtn">
						<text>同意退款</text>
					</view>
				</view>
			</view>
			<view class="orderitem">
				<view class="order-top">
					 <text>工种：{{'水电'}}</text>
					 <view class="orderstatus">
					 	<text>已退款</text>
						<u-icon name="/static/navigate.png" size="30"></u-icon>
					 </view>
				</view>
				<view class="orderservice">
					<view class="serviceitem">
						<text class="servicetitle">退款金额：</text>
						<text class="servicevalue error">{{price.toFixed(2)|addPaysign}}</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">退款原因：</text>
						<text class="servicevalue">未按约定前来售后</text>
					</view>
					<view class="serviceitem">
						<text class="servicetitle">上门地址：</text>
						<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
					</view>
				</view>
				<view class="orderbtns">
					<view class="orderbtn">
						<text>查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:200
			}
		},
		methods: {
			
		},
		filters:{
			addPaysign:function(val){
				return '￥'+val;
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 min-height: 100%;
		 background-color: #F4F8FB;
		 .orderlist{
			 width:100%;
			 height: auto;
			 padding-bottom: 20rpx;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: center;
		 }
		 .orderitem{
			 width: 710rpx;
			 height: auto;
			 background-color: #FFFFFF;
			 border-radius: 20rpx;
			 padding-top: 20rpx;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: center;
			 margin-top: 30rpx;
		 }
		 .order-top{
			 width: 680rpx;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 text{font-size: 30rpx;}
			 .orderstatus{display: flex;align-items: center;}
		 }
		 .orderservice{
		 	width: 680upx;
		 	height: auto;
		 	color: rgba(34, 34, 34, 1);
		 	padding-bottom: 20upx;
		 	display: flex;
		 	flex-wrap: wrap;
		 	.serviceitem{
		 		width: 100%;
		 		height: auto;
		 		margin-top: 20upx;
		 		display: flex;
		 		font-size: 30upx;
		 	}
		 	.servicetitle{
		 		display: block;
		 		word-break: break-all;
		 	}
		 	.servicevalue{
		 		display: block;
		 		width: 500upx;
		 	    word-break: break-all;
		 	}
		 	border-bottom: 1upx solid #F1F1F1;
		 }
		 .orderbtns{
			 width: 680rpx;
			 height: 120rpx;
			 display: flex;
			 justify-content: flex-end;
			 align-items: center;
			 .orderbtn{border: 1rpx solid #F1F1F1;width: 180rpx;height: 80rpx;box-sizing: border-box;font-size: 28rpx; color: #888;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;}
		 }
		 .error{
			 color: red;
		 }
	 }
</style>
